<script setup>
import {nextTick, onMounted, ref, watch} from "vue";
import {getAllType} from "@/api/base.js";
import {experienceConfig} from "@/utils/appData.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  info:{
    type:Object,
    default:()=>{}
  }
})

watch(()=>props.info, (newVal)=>{
  // 回填技能
  if(props.info.skill){
    skillNums.value = props.info.skill.length
    skill.value = props.info.skill
  }
})

const skill = ref([])
const skillChange = (val,index)=>{
  const findSkill = selectList.value.find(item=> item.id === val)
  skill.value[index]['skillName'] = findSkill.label
}

const skillNums = ref(0)
const selectList = ref([])
const getTypes = async ()=>{
  try{
    const res = await getAllType()
    selectList.value = res.data
  }catch (e) {
    console.lo(e)
  }
}

onMounted(()=>{
  getTypes()
  if(skillNums.value === 0){
    skillNums.value = 3
    for (let i = 0; i < skillNums.value; i++) {
      skill.value.push({goodsTypeId:'', skillName:'', experienceYear:''})
    }
  }
})

const addLine = ()=>{
  if(skillNums.value > 10){
    return ElMessage.warning('技能最多选择10个')
  }
  skillNums.value++
  skill.value.push({goodsTypeId:'', skillName:'', experienceYear:''})
}
const delLine = (index)=>{
  if(skillNums.value <= 3){
    return ElMessage.warning('最少选择3个技能')
  }
  skillNums.value--
  skill.value.splice(index, 1)
}

const disabledOption = (item, index) => {
  return skill.value.some((skill, i) => i !== index && skill.goodsTypeId === item.id)
}

defineExpose({skill})
</script>

<template>
<div class="form">
  <h4 class="title"><span></span> 专业技能</h4>
  <p class="tips"><b><i>*</i> 你的专业技能</b> <span class="ru">填写3-10个专业相关的技能，为了平台给你推荐准确的机会</span> <span class="rj">技能越详细，匹配客户的速度越快</span></p>
  <div class="list">
    <div class="item" v-for="(item,index) in skillNums" :key="item">
      <el-select placeholder="请选择技能" v-model="skill[index]['goodsTypeId']" @change="(value)=>skillChange(value, index)" style="width: 400px; margin-right: 16px">
        <el-option v-for="item in selectList" :disabled="disabledOption(item, index)" :key="item.id" :label="item.label" :value="item.id"></el-option>
      </el-select>
      <el-select placeholder="几年经验" style="width: 240px"  v-model="skill[index]['experienceYear']">
        <el-option v-for="item in experienceConfig"  :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <span v-if="item>3" class="del" @click="delLine(index)"><img src="@/assets/del-icon.png" alt=""></span>
    </div>
  </div>
  <p class="add" @click="addLine">+ 添加技能</p>
</div>
</template>

<style scoped lang="scss">
.form{
  width: 1200px;
  margin: 0 auto 20px;
  background: #FFFFFF;
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25,30,40,0.08);
  padding: 20px;
  box-sizing: border-box;
  .title{
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-bottom: 20px;
    span{
      width: 2px;
      height: 12px;
      background: #1DBF73;
      border-radius: 10px 10px 10px 10px;
      margin-right: 6px;
    }
  }
}
.tips{
  b{
    color: #191E28;
    i{
      color: #FF4F4F;
    }
  }
  .ru{
    margin: 0 8px;
    color: rgba(25,30,40,0.36);
    font-size: 12px;
  }
  .rj{
    color: #008571;
    font-size: 12px;
  }
}
.item{
  display: flex;
  align-items: center;
  margin-top: 12px;
  .del{
    margin-left: 12px;
    cursor: pointer;
    img{
      width: 20px;
      height: 20px;
    }
  }
}
.add{
  color: #008571;
  font-weight: bold;
  margin-top: 16px;
  cursor: pointer;
  user-select: none;
}
</style>

<style>
.el-select .el-select__wrapper{
  height: 48px;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid rgba(25,30,40,0.08);
  box-shadow: none;
}
</style>